<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="256px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">
    <div class="sidebar-logo">
      <a href="https://ng.ant.design/" target="_blank">
        <img src="https://ng.ant.design/assets/img/logo.svg" alt="logo">
        <h1>Ant Design Of Angular</h1>
      </a>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-submenu nzOpen nzTitle="Dashboard" nzIcon="dashboard">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/user">Welcome</a>
          </li>
        </ul>
      </li>
      <li nz-submenu nzOpen nzTitle="配置" nzIcon="tool">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/manage/list">插件市场</a>
          </li>
          <!--          <li nz-menu-item nzMatchRouter>-->
          <!--            <a routerLink="/manage/custom">自定义插件</a>-->
          <!--          </li>-->
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/manage/loaded">已加载插件</a>
          </li>
        </ul>
      </li>

      <ng-container *ngFor="let item of (pluginMenu$|async)||[]">
        <ng-container *ngIf="item.children && item.children.length > 0; else noChildrenMenu">
          <li nz-submenu nzOpen [nzTitle]="item.name" [nzIcon]="item.icon">
            <ul>
              <ng-container *ngFor="let sub of item.children">
                <li nz-menu-item nzMatchRouter [routerLink]="sub.path">
                  <ng-container *ngIf="!!sub.icon">
                    <span nz-icon [nzType]="sub.icon"></span>
                  </ng-container>
                  <span>{{sub.name}}</span>
                </li>
              </ng-container>
            </ul>
          </li>
        </ng-container>
        <ng-template #noChildrenMenu>
          <li nz-menu-item [routerLink]="item.path" nzMatchRouter>
            <ng-container *ngIf="item.icon">
              <span nz-icon [nzType]="item.icon"></span>
            </ng-container>
            <span>{{item.name}}</span>
          </li>
        </ng-template>
      </ng-container>

    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
            <span class="trigger"
                  nz-icon
                  [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></span>
        </span>
      </div>
    </nz-header>
    <nz-content>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>
